<!--上传身份证-->
<template>
    <div class="mainlandcardbox f-cb">
        <div class="idcard f-cb">
            <div class="idcardbox">
                <form action="###" id="positiveForm">
                    <input
                        class="inputfile"
                        type="file"
                        accept="image/png, image/jpeg"
                        @change="upload"
                    />
                </form>
                <img :src="positiveImgUrl" class="card" v-show="FrontAndBackShow">
                <span class="idcardBg">
                    <img src="@/assets/img11.png" alt="">
                    <span>{{$t('m.Uploadpositive')}}</span>
                </span>
            </div>
        </div>
        <div class="carddemand" v-if="!FrontAndBackShow">
            <h1>{{$t('m.text1')}}</h1>
            <div class="tsp">{{$t('m.text2')}}</div>
            <div class="tsp">{{$t('m.text3')}}<span class="blur">{{$t('m.text4')}}</span></div>
            <span>
                <img src="@/assets/img13_en.png" alt="" class="noneImg" v-if="lang =='en'">
                <img src="@/assets/img13_tc.png" alt="" class="noneImg" v-else-if="lang =='tc'">
                <img src="@/assets/img13.png" alt="" class="noneImg" v-else>
            </span>
        </div>
    </div>
</template>

<script>
    import {uploads} from "@/common/common";
    export default {
        props: ["list","lang","value",'isnone'],
        data() {
            return{
                rulesText:"",
                positiveImgUrl:"",
                positiveImgShow:false,
                FrontAndBackShow:false,//false 显示正面 true 显示反面
            }
        },
        mounted(){
            this.rulesList();
        },
         methods:{
            upload(event){
                let files = event.target.files || event.dataTransfer.files;
                var formDate = new FormData();
                formDate.append("file", files[0]);
                formDate.append("marker", 1);
                uploads(formDate,res => {
                    var res = res.data;
                    if(res.code == 1){
                        this.FrontAndBackShow=true;
                        this.positiveImgUrl=res.data.url;
                        document.getElementById("positiveForm").reset()
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            rulesList(){
                 var arr = [];
                if(this.list.is_require==1){
                    arr.push({ required: true,message:this.list['title_'+this.lang]})
                }
                this.$emit('changeRules',this.list.name,arr,this.isnone)
            }
        },
        watch:{
            positiveImgUrl(val,old){
                this.$emit('input',val)
            },
            value:{
                handler(val,old){
                    //console.log(val,'listItem1')
                    if(val != undefined && val != ""){
                        this.positiveImgUrl = val;
                        this.FrontAndBackShow = true;
                        console.log(this.positiveImgUrl,'listItem1')
                    }
                },
                immediate:true,
                deep:true,
            }
        }
    }
</script>
<style lang="less">
    .mainlandcardbox{
        width: 100%;
        margin:0 auto;
        .noneImg{
            margin-top: 24px;
            max-width: 100%;
        }
        h1{
            font-size: 20px;
            font-weight: bold;
            line-height:36px;
            color: @000;
        }
        .tsp{
            font-size: 12px;
            color: @titleColor;
            line-height:22px;
            .blur{
                color: @hoverColor;
            }
        }
        .idcard{
            width: 100%;
            margin-top: 26px;
            .idcardbox{
                width: 180px;
                position: relative;
                margin: 0 auto;
                .idcardBg{
                    display: block;
                }
                .idcardBg img{
                    width: 100%;
                }
                .idcardBg span{
                    width: 100%;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    border-radius: 3px;
                    background: @hoverColor;
                    color: @fff;
                    display: block;
                    margin-top: -18px;
                    z-index: 1;
                    position: relative;
                }
                .card{
                    max-width: 150px;
                    max-height: 100px;
                    z-index:2;
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%, -66%);
                    object-fit: cover;
                }
                .inputfile {
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                    z-index:3;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
        .carddemand{
            padding-top: 50px;
            margin-bottom: 20px;
        }    
    }
</style>